<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>姓名案例_watch简写的方式实现不需要deep等属性的时候才可以简写</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。如果用箭头函数，箭头函数的this会指向windows（箭头函数有一个特性：它们不会绑定自己的 this，而是继承自包含它们的作用域的 this。比如继承外部vue实例的this就会指向windows）
							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/>
		名：<input type="text" v-model="lastName"> <br/>
		全名：<span>{{fullName}}</span> <br />
	</div>

</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el: '#root',
		data: {
			firstName: '张',
			lastName: '三',
			fullName: '张-三'
		},
		watch: {
			firstName(val) {  //如果watch函数中只有一个参数，那么这个参数就是监视拿到的最新的值
				setTimeout(() => {  //延时多久执行一次,这里的this集成他的父函数firstName为vue实例
					console.log(this);
					this.fullName = val + '-' + this.lastName
				}, 1000);
			},
			lastName(val) {
				this.fullName = this.firstName + '-' + val
			}
		}
	})
//下面用来测试在vue中使用箭头函数的方式定义方法，它里面的this继承外部vue实例的作用域为windows
	// const vm2 = new Vue({
	// 	el: '#root',
	// 	data: {
	// 		message: 'Hello Vue!',
	// 		firstName: '张',
	// 		lastName: '三',
	// 		fullName: '张-三'
	// // 	},
	// 	},
	// 	methods: {
	// 		printMessage: () => {
	// 			console.log(this.message); // 这里的 this 指向 Vue 实例，而不是 window
	// 			console.log(this);  //这里的this就是windows
	// 		}
	// 	}
	// });
	// vm2.printMessage(); // 输出 'Hello Vue!'

</script>

</html>